<template>
  <div>
    <div class="home-panel" data-v-39dda62a="" data-v-2ff17d82="">
      <div class="container" data-v-39dda62a="">
        <div class="head" data-v-39dda62a="">
          <h3 data-v-39dda62a="">最新专题<small data-v-39dda62a=""></small></h3>
          <a
            aria-current="page"
            href="#"
            class="router-link-active router-link-exact-active xtx-more"
            data-v-d6f2c104=""
            data-v-2ff17d82=""
            ><span data-v-d6f2c104="">查看全部</span
            ><i class="iconfont icon-angle-right" data-v-d6f2c104=""></i
          ></a>
        </div>
        <div class="special-list" data-v-2ff17d82="">
          <div class="special-item" data-v-2ff17d82="" v-for="item,index in arr" :key="index">
            <a
              aria-current="page"
              href="#"
              class="router-link-active router-link-exact-active"
              data-v-2ff17d82=""
              ><img
                :src="item.detailsUrl"
                alt=""
                data-v-2ff17d82=""
              />
              <div class="meta" data-v-2ff17d82="">
                <p class="title" data-v-2ff17d82="">
                  <span class="top1 ellipsis" data-v-2ff17d82=""
                    >{{item.title}}</span
                  ><span class="sub ellipsis" data-v-2ff17d82=""
                    >{{item.summary}}</span
                  >
                </p>
                <span class="price" data-v-2ff17d82="">¥{{item.lowestPrice}}起</span>
              </div></a
            >
            <div class="foot" data-v-2ff17d82="">
              <span class="like" data-v-2ff17d82=""
                ><i class="iconfont icon-hart1" data-v-2ff17d82=""></i
                >{{item.collectNum}}</span
              ><span class="view" data-v-2ff17d82=""
                ><i class="iconfont icon-see" data-v-2ff17d82=""></i>{{item.replyNum}}</span
              ><span class="reply" data-v-2ff17d82=""
                ><i class="iconfont icon-message" data-v-2ff17d82=""></i
                >{{item.viewNum}}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr:[]
    }
  },
  mounted() {
    this.axios
      .get("https://apipc-xiaotuxian-front.itheima.net/home/special")
      .then((res) => {
        this.arr = res.data.result;
      });
  },
};
</script>